<template>
    <div class="task_container">
        <!--<div-->
        <!--class="task_item"-->
        <!--v-for="(item, index) in taskList"-->
        <!--:key="index"-->
        <!--@click="clickTaskItem(item,index)"-->
        <!--&gt;-->
        <!--<div class="task_content">-->
        <!--<div class="task_title">{{ item.mc }}</div>-->
        <!--<div class="task_desc">{{ item.zzjh ? item.zzjh : "......" }}</div>-->
        <!--</div>-->
        <!--<div class="task_status">{{ item.zt ? "执行中" : "未执行" }}</div>-->
        <!--</div>-->

        <!--<el-input placeholder="请输入内容" v-model="searchStr" class="input-with-select">-->
        <!--<el-button slot="append" icon="el-icon-search"></el-button>-->
        <!--</el-input>-->

        <el-table
                :data="taskList"
                style="height:100%;background: transparent;"
                height="100%"
        >
            <el-table-column
                    prop="mc"
                    label="名称"
            >
            </el-table-column>
            <el-table-column
                    prop="zt"
                    label="状态"
            >
                <template slot-scope="scope">
                    <el-tag size="mini"  :type="scope.row.zt==0?'danger':scope.row.zt==1?'success':'info'">
                        {{scope.row.zt==0?'未执行':scope.row.zt==1?'执行中':'已完成'}}
                        <!--{{scope.row.zt==0?'未推送':'已推送'}}-->
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button
                            v-if="scope.row.zt == 0 || scope.row.zt == 1"
                            @click.native.prevent="processTaskItem(scope.$index, scope.row)"
                            style="color:#ee4242"
                            type="text"
                            size="small">
                        {{"规划"}}
                    </el-button>
                    <el-button
                            v-if="scope.row.zt == 1"
                            @click.native.prevent="endTaskItem(scope.$index, scope.row)"
                            style="color:#0d98ed"
                            type="text"
                            size="small">
                        {{"完成"}}
                    </el-button>
<!--                    <el-button
                            @click.native.prevent="deleteTask(scope.$index)"
                            type="text"
                            size="small">
                        删除
                    </el-button>-->
                </template>
            </el-table-column>
        </el-table>

        <!--<div class="btn_add">-->
        <!--<el-button type="primary" icon="el-icon-plus" circle></el-button>-->
        <!--</div>-->

        <el-dialog
                title="提示"
                :visible.sync="centerDialogVisible"
                width="90%"
                center
        >
            <span style="font-size: 16px;font-weight: bold;">{{clickedItem?clickedItem.mc:""}}</span>
            <!--<span>需要注意的是内容是默认不居中的</span>-->
            <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="deleteTask()">删除</el-button>
        <el-button type="warning" @click="endTask()">结束</el-button>
        <el-button type="success" @click="startTask()">开始</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    // import {getSingleTaskMes, deleteTask} from "@/request/api.js";

    export default {
        data() {
            return {
                taskList: [],
                searchStr: '',
                centerDialogVisible: false,
                clickedItem: null,
                clickedIndex: '',

            };
        },
        mounted() {
            this.getTaskList();
        },
        methods: {
            getTaskList() {
                let data = {
                    limit: 50,
                    offset: 1,
                    search: "",
                };

                let res = $App.findAllTask();
                this.taskList = JSON.parse(res);

                // getSingleTaskMes(data)
                //     .then((res) => {
                //         console.log(res);
                //         if (res.code == 0) {
                //             this.taskList = res.data.rows;
                //         }
                //     })
                //     .catch((e) => {
                //         console.log(e);
                //     });
            },
            clickTaskItem(item, index) {
                this.centerDialogVisible = true;
                this.clickedItem = item;
                this.clickedIndex = index;
            },
            deleteTask(index) {
                let res = $App.delTaskById(this.taskList[index].id);

                if(res == 1){
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.centerDialogVisible = false;
                    this.taskList.splice(index, 1);

                }else {
                    this.$message({
                        message: '删除失败',
                        type: 'error'
                    });
                }

                // deleteTask({params: {xh: this.taskList[index].xh}}).then(res => {
                //     this.centerDialogVisible = false;
                //     this.taskList.splice(index, 1);
                //     this.$message({
                //         message: '删除成功',
                //         type: 'success'
                //     });
                // }).catch(e => {
                //     this.centerDialogVisible = false;
                //     this.$message({
                //         message: '删除失败',
                //         type: 'error'
                //     });
                // })

            },
            endTask() {


            },
            startTask() {

            },
            endTaskItem(index, obj) {
                let ljtjd = ''
                if(this.taskList[index].ljtjd) {
                    let ljtjdArr = JSON.parse(this.taskList[index].ljtjd)
                    ljtjdArr.forEach((item, i) => {
                        if (i < ljtjdArr.length - 1) {
                            ljtjd = ljtjd + item.longitude + ',' + item.latitude + ','
                        } else {
                            ljtjd = ljtjd + item.longitude + ',' + item.latitude
                        }
                    })
                }
                $App.updateTask(JSON.stringify({...obj, ljtjd, zt: 2}))
                this.getTaskList()
            },
            processTaskItem(index, obj) {
                if(obj.zt == 0) {
                    let ljtjd = ''
                    if(this.taskList[index].ljtjd) {
                        let ljtjdArr = JSON.parse(this.taskList[index].ljtjd)
                        ljtjdArr.forEach((item, i) => {
                            if (i < ljtjdArr.length - 1) {
                                ljtjd = ljtjd + item.longitude + ',' + item.latitude + ','
                            } else {
                                ljtjd = ljtjd + item.longitude + ',' + item.latitude
                            }
                        })
                    }
                    $App.updateTask(JSON.stringify({...obj, ljtjd, zt: 1}))
                }
                console.log(this.taskList[index])
                this.$globalObj.points = this.taskList[index].ljtjd;
                this.$globalObj.taskDesc = this.taskList[index].mc;
                let pointsArr = this.taskList[index].ljtjd ? JSON.parse(this.taskList[index].ljtjd) : []
                this.$router.push({
                    path: '/navimap',
                    query: pointsArr.length ? {startPoint: pointsArr[0] ,endPoint: pointsArr[pointsArr.length - 1]} : {}
                })
            }

        },
        computed: {},
    };
</script>

<style scoped>
    .task_container {
        overflow: auto;
        /*height: 100%;*/
        background: #f5f5f5;
        padding: 0 10px;
        flex:1;
    }

    .task_item {
        display: flex;
        flex-direction: row;
        padding: 10px 10px;
        margin: 10px 10px 0 10px;
        /*margin-top: 10px;*/
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }

    .task_content {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .task_title {
        font-weight: bold;
    }

    .task_desc {
        font-size: 12px;
        color: gray;
    }

    .task_status {
        font-size: 14px;
    }

    .btn_add {
        position: fixed;
        right: 10px;
        bottom: 60px;
    }

    /deep/ .el-table th.el-table__cell {
        /*background: #4775ff;*/
        /*background: #0a3165;*/
        /*color: white;*/
        color: #333333;
        font-weight: bold;
    }

    /deep/ .el-table tr {
        /*background-color: #0a3165;*/
        /*color: #ced6e0;*/
    }

    /deep/ .el-button--text {
        /*color: #64feff;*/
        color:#666;
    }

    /deep/ .cell>button:first-child{
        font-weight: bold;
    }
    /deep/ .cell>button:last-child{
        font-weight: bold;
    }
</style>
